<template>
  <el-row class="navbar">
    <el-col :span="2" class="logo"><div><img src="../assets/images/img_logo.png" alt=""></div></el-col>
    <el-col :span="4" :offset="10">&nbsp;</el-col>
    <el-col :span="8" class="exit">
      <button class="sortMenuBtn" v-if='canSortMenu' @click='handleSortMeun'>编辑菜单</button>
      <el-select v-model="roleId" placeholder="请选择" @change="setRoleId">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          >
        </el-option>
      </el-select>
      <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{realName}}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="changePassWord">修改密码</el-dropdown-item>
          <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>
<script>

import {getAssignRoles} from '../api/common/index.js'
  export default {
    data () {
      return {
        options:  [],
        roleId: '',
        sortMenu:false,
      }
    },
    created(){
      this.getAssignRoles();
      
    },
    computed: {
        realName(){
            let name=sessionStorage.getItem('realName');
            if(name==''){name=sessionStorage.getItem('USER_NAME')}
                return name;
        },
        canSortMenu(){
            var handle = false;// 只有超级管理员才可以编辑菜单权限
            for(let i =0;i<this.options.length;i++){
                console.log(this.options[i].id, this.options[i].name )
                if(this.roleId == this.options[i].id && (this.options[i].name =='超级管理员' || this.options[i].name =='系统管理员')){
                    handle = true;
                    console.log('------' +handle)
                }
            }
            this.$emit('setSuperMan', handle)
            return handle
        }
    },
    watch:{
      roleId(val, oldVal){
        // console.warn('watch roleId => ',val, oldVal)
        this.$store.dispatch('setRoleId', val);
        // 刷新页面要回到之前的菜单
        sessionStorage.setItem('roleId', val)
      },
    },
    methods: {
      async getAssignRoles(){//请求用户角色
        try{
          let back = await getAssignRoles(sessionStorage.getItem('HKid'))
          back = back.data;
          // console.warn(back)
          if(back.resultCode === '200'){
            this.options=back.result;
              if(back.result.length==0){
                this.$alert('该用户未分配任何角色');
                return false;
              }
              this.roleId =sessionStorage.getItem('roleId') 
                ? sessionStorage.getItem('roleId') - 0  //要数字
                : back.result[0].id; //默认设置第一个用户角色

              this.setRoleId();
          }
          
        }catch(e){
          console.error(e)
        }
      },
      
      handleCommand(command) {
        if(command=="changePassWord"){
            this.chgPassword();
        }else if(command=="loginOut"){
            this.loginOut();
        }
      },
//      退出登录,清空登录信息
      loginOut(){
        let _this = this;
        this.$confirm('确认退出吗?', '提示', {
        }).then(() => {
          sessionStorage.removeItem('realName');
          sessionStorage.removeItem('HKid');
          sessionStorage.removeItem('roleId');
          // this.$store.dispatch('setMenuList',[]);
        _this.$router.push('/login');
      }).catch(() => {

        });
      },
      chgPassword(){
        let _this = this;
        this.$confirm('确认修改密码吗?', '提示', {
        }).then(() => {
          _this.$router.push('/chgPassword');
        }).catch(() => {
        });
      },
      setRoleId(){
        sessionStorage.setItem('roleId', this.roleId)
        this.$store.dispatch('setRoleId', );
        this.$emit('setRoleId', this.roleId)
			},
			handleSortMeun(){
        this.sortMenu = !this.sortMenu;
				this.$emit('handleSortMeun', this.sortMenu ? 2 : 0)
			}
    }
  }
</script>

<style lang="less">
  .navbar{
    height:4.375rem;
    background: #3f4242 ;
    line-height:4.375rem;
    .logo{
      display: block;
      font-size: 20px;
      color:white;
      text-align: center;
      padding:0 0 0 16px;
      div{
        width: 100%;
        height: 80%;
        margin-top:6px;
        line-height:48px;
      }
    }
    .exit{
      text-align: right;
      padding-right:30px;
      color:white;
      cursor:pointer;
    }
    .el-input__inner{
      background-color: #3F4242;
      color:#fff;
    }
    .el-dropdown{
      color:#fff;
      margin-left:50px;
    }
    .sortMenuBtn{
      font-size: 14px;
      color: #63c5ce;
			margin-right: 30px;
			background-color: transparent;
      &:active{
        color: #4d9999;
      }
    }
  }
</style>
